<template>
    <div class="container">
        <div class="header block block-active">
            <div class="header-left">
                <!-- ../assets/long-insure/insurance-type1.png -->
                <img :src="tioInfo.insurCompanyLogo" alt="" class="portrait"/>
                <div class="header-left-info">
                    <div class="left-info-title">
                        {{ tioInfo.insurCompanyPlanName }}
                    </div>
                    <div class="left-info-date">
                        {{ tioInfo.beginTime }} 至
                        {{ tioInfo.endTime || '暂无到期时间' }}
                    </div>
                </div>
            </div>
            <div class="header-right">
                <button class="btn btn-green" @click="onlineSelection">
                    <i class="el-icon el-icon-upload2"/>
                    在线选择
                </button>
                <button class="btn btn-white-blue" @click="sglr">
                    <i class="el-icon el-icon-edit"/>
                    手工录入
                </button>
                <el-upload class="upload-demo" :drag="false" :disabled="false" :show-file-list="false"
                           :file-list="fileList" :before-upload="onUpFile" :http-request="() => { }"
                           accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                    <button class="btn btn-white-blue">
                        <i class="el-icon el-icon-folder-add"/>
                        导入名单
                    </button>
                </el-upload>
                <button class="btn btn-red" style="background:#1989FA" @click="downLoadTemp">
                    <i class="el-icon el-icon-download"/>
                    <a class="down-templete"
                       style="position: relative;z-index:10;text-decoration: none;color:#ffffff">模板下载</a>
                </button>
            </div>
        </div>
        <div class="block block-alone">
            <div class="table-top-title">
                <div class="title-left">
                    <div class="title">
                        本次{{
                            insurance === 'reduce' ? '减保' : '加保'
                        }}人员（{{
                            insurance === 'reduce'
                                ? addList.filter(item => !item.errMsg).length
                                : addList.length
                        }}）人
                    </div>
                    <div class="search" v-if="insurance === 'add'">
                        <el-select v-model="searchType" filterable placeholder="派遣单位" class="screen-i search-type">
                            <el-option v-for="(item, index) in companyList" :key="index" :label="item" :value="index"/>
                        </el-select>
                        <button class="btn btn-padding" @click="search">
                            搜索
                        </button>
                        <button class="btn-white" @click="onReset">
                            重置
                        </button>
                    </div>
                </div>
                <div>
                    <span class="effective">选择生效日期</span>
                    <el-date-picker :disabled="datePickerDisabled" v-model="date" type="date" placeholder="选择日期"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                </div>
            </div>
            <div class="table">
                <el-table v-if="insurance === 'add'" :data="addList" style="width: 100%"
                          :header-row-style="{ color: '#202536' }" :row-style="{ color: '#5E617D' }"
                          @selection-change="handleSelectionChange" :header-cell-style="{ background: '#F7F8FC' }">
                    <el-table-column type="selection" width="55"/>
                    <el-table-column type="index" label="序号" width="50"/>
                    <el-table-column prop="userName" label="姓名"/>
                    <el-table-column label="身份证号" prop="idCardNo" width="300px">
                        <template #default="scope">
                            {{
                                scope.row.idCardNo.replace(
                                    /(.{3})(?:\d+)(.{4})$/,
                                    '$1*********$2'
                                )
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column label="被派遣单位" prop="serveCompanyName"></el-table-column>
                    <!-- occupationId -->
                    <el-table-column prop="occupationName" label="所属工种">
                        <template #default="scope">
                            {{
                                scope.row.occupationId
                                    ? scope.row.occupationName
                                    : ''
                            }}
                            {{
                                scope.row.level
                                    ? '(' + scope.row.level + '类)'
                                    : ''
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="specialAppoint" label="特别约定">
                        <template #default="scope">
                            {{
                                scope.row.specialAppoint
                                    ? scope.row.specialAppoint
                                    : '--'
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <div class="operation-box">
                                <p style="color:#1989FA" class="point" @click="
                                    editPersonnelInfo(
                                        scope.row.idCardNo,
                                        'alone',
                                        scope.row
                                    )
                                    ">
                                    编辑
                                </p>
                                |
                                <p style="color:#FF7E68" class="point" @click="deletePersonnel(scope.row.idCardNo)">
                                    删除
                                </p>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <!--                  { color: '#5E617D',background: addList.map(item => {item.errMsg})? 'grey' : '' }  -->
                <!--                  :default-sort="changeSort"-->
                <!--                  @sort-change="changeSort"-->
                <!--        :default-sort='{prop:"errMsg", order:"descending"}'-->
                <el-table v-if="insurance === 'reduce'" :data="addList" style="width: 100%"
                          :header-row-style="{ color: '#202536' }" :row-style="reduceTable" sortable="true"
                          :default-sort="{ prop: 'errMsg', order: 'descending' }"
                          @selection-change="handleSelectionChange"
                          :header-cell-style="{ background: '#F7F8FC' }">
                    <!--          :selectable='checkMaterialStatus'-->
                    <el-table-column type="selection" width="55" :selectable="checkMaterialStatus"/>
                    <el-table-column type="index" label="序号" width="50"/>
                    <el-table-column prop="userName" label="姓名"/>
                    <el-table-column label="身份证号" prop="idCardNo"></el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <div class="operation-box">
                                <p style="color:#1989FA" class="point" @click="
                                    editPersonnelInfo(
                                        scope.row.idCardNo,
                                        'alone',
                                        scope.row
                                    )
                                    ">
                                    编辑
                                </p>
                                |
                                <p style="color:#FF7E68" class="point" @click="deletePersonnel(scope.row.idCardNo)">
                                    删除
                                </p>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <el-pagination
            class="pagination"
            v-model:currentPage="addPageNum"
            v-model:page-size="addPageSize"
            :page-sizes="[10, 30, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="addList.length"
            @size-change="interceptList"
            @current-change="interceptList"
        >
        </el-pagination> -->
                <!-- 开始 -->
                <!-- <div class="foot-operation">
            <div class="select-delete">
                <div class="select-delete" v-if="selectionList.length > 0">
                    已选择<span class="num">{{ selectionList.length }}</span>项
                </div>
                <div class="delete point" @click="batchDelete" v-if="selectionList.length > 0">
                    删除选中
                </div>
            </div>
            <div class="foot-btn-box">
                <button class="btn btn-white-blue" v-if="selectionList.length > 0 && insurance === 'add'" @click="onDisplayIsEditPopup('batch')">
                    设置工种
                </button>
                <button v-if="insurance === 'add'" class="btn btn-red" style="background:#1989FA;margin: 20px 0 20px 10px;" @click="isRemindPopup = true">
                    确认加保
                </button>
                <button v-if="insurance === 'reduce'" class="btn btn-red" style="background:#1989FA;margin: 20px 0;" @click="isRemindPopup = true">
                    确认减保
                </button>
            </div>
        </div> -->
                <!-- 结束 -->
            </div>
        </div>
        <personnelQueryPopup v-if="isPopup" :id="companyPlanId" :type="this.$route.params.type" @close="isPopup = false"
                             @complete="insureComplete" :insur="tioInfo.insurCompany"/>
        <!-- 编辑弹窗 -->
        <alert-box class="alert-box" data-Title="设置工种" v-if="isEditPopup" @close="onCancelModification">
            <div class="edit-popup-box" style="width: 640px;">
                <div class="row" v-if="isEditTypePopup === 'alone'">
                    <div class="name">
                        <span class="important">*</span>
                        姓名
                    </div>
                    <el-input placeholder="请输入姓名" v-model="manualName"/>
                </div>
                <div class="row" v-if="isEditTypePopup === 'alone'">
                    <div class="name">
                        <span class="important">*</span>
                        身份证
                    </div>
                    <el-input placeholder="请输入身份证" v-model="manualCode"/>
                </div>
                <div class="row" v-if="insurance === 'add'">
                    <div class="name">
                        <span class="important">*</span>
                        被派遣单位
                    </div>
                    <el-select v-model="companyDetailId" filterable placeholder="选择派遣单位"
                               class="screen-i search-type"
                               @click="getCompanyDetailList" @change="onSelectCompany">
                        <el-option v-for="(item, index) in companyDetailList"
                                   :disabled="item.isBlacklist || item.isForbidden" v-bind:key="index"
                                   :label="item.serveCompanyName" :value="item.serveCompanyId"/>
                    </el-select>
                </div>
                <div class="row" v-if="insurance === 'add'">
                    <div class="name">
                        <span class="important">*</span>
                        工种
                    </div>
                    <el-select v-model="workTypeId" @focus="onFocuse" filterable placeholder="选择工种"
                               class="screen-i search-type">
                        <el-option v-for="(item, index) in workTypeList" v-bind:key="index"
                                   :label="item.name + '(' + item.level + '类)'" :value="item.id"/>
                    </el-select>
                </div>
                <div class="row" style="align-items: start !important;" v-if="specialAppoint">
                    <div style="width: 30px;flex-shrink: 0;">
                        <el-checkbox v-model="specialAppointisSelect" size="large"/>
                    </div>
                    <div v-if="specialAppoint && !isopenmore"
                         style="width: 300px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
                        {{ specialAppoint }}
                    </div>
                    <div v-if="specialAppoint && isopenmore" style="width: 300px;">
                        {{ specialAppoint }}
                    </div>
                    <img @click="changeisopenmore(0)" v-if="showmore && !isopenmore"
                         style="width: 16px;height: 16px;transform: rotate(90deg);cursor: pointer;margin-top: 10px"
                         src="../assets/common/arrow.png" alt=""/>
                    <img @click="changeisopenmore(1)" v-if="showmore && isopenmore"
                         style="width: 16px;height: 16px;transform: rotate(-90deg);cursor: pointer;margin-top: 10px"
                         src="../assets/common/arrow.png" alt=""/>
                </div>
            </div>
            <div class="alert-bottom">
                <button class="alert-bottom-btn btn btn-white-blue btn-alone white" @click="onCancelModification">
                    <!-- <i class="el-icon el-icon-plus" /> -->
                    取消
                </button>
                <button class="alert-bottom-btn btn btn-green btn-alone " @click="onConfirmModification">
                    <!-- <i class="el-icon el-icon-plus" /> -->
                    确定
                </button>
            </div>
        </alert-box>
        <!-- <el-dialog v-model="isEditPopup" width="470px" title="设置工种" center>
    </el-dialog> -->
        <!-- 手动录入弹窗 -->
        <alert-box class="alert-box" data-Title="手工录入" v-if="isManualPopup" @close="isManualPopup = false">
            <div class="edit-popup-box">
                <div class="row">
                    <div class="name">
                        <span class="important">*</span>
                        姓名
                    </div>
                    <el-input placeholder="请输入姓名" v-model="manualName"/>
                </div>
                <div class="row">
                    <div class="name">
                        <span class="important">*</span>
                        身份证
                    </div>
                    <el-input placeholder="请输入身份证" v-model="manualCode"/>
                </div>
                <div class="row" v-if="insurance === 'add'">
                    <div class="name">
                        <span class="important">*</span>
                        被派遣单位
                    </div>
                    <el-select v-model="companyDetailId" filterable placeholder="选择派遣单位"
                               class="screen-i search-type"
                               @click="getCompanyDetailList" @change="onSelectCompany">
                        <el-option v-for="(item, index) in companyDetailList"
                                   :disabled="item.isBlacklist || item.isForbidden" v-bind:key="index"
                                   :label="item.serveCompanyName" :value="item.serveCompanyId"/>

                        <template #empty>
                            <div v-if="loaded" style="padding: 10px">
                                <div>无审核通过的"被派遣单位"</div>
                                <div style="margin-top: 10px; color: red">解决方法：请在"审核派遣单位页" 审核
                                    "派遣单位"
                                </div>
                            </div>
                            <div v-else>
                                <div style="padding: 10px; text-align: center; color: #ccc">加载中</div>
                            </div>
                        </template>
                    </el-select>
                </div>
                <div class="row" v-if="insurance === 'add'">
                    <div class="name">
                        <span class="important">*</span>
                        工种
                    </div>
                    <el-select v-model="workTypeId" filterable placeholder="选择工种" @focus="onFocuse" class="screen-i search-type">
                        <el-option v-for="(item, index) in workTypeList" v-bind:key="index"
                                   :label="item.name + '(' + item.level + '类)'" :value="item.id"/>
                    </el-select>
                </div>
                <div class="row" style="align-items: start !important;" v-if="specialAppoint">
                    <div style="width: 30px;flex-shrink: 0;">
                        <el-checkbox v-model="specialAppointisSelect" size="large"/>
                    </div>
                    <div v-if="specialAppoint && !isopenmore"
                         style="width: 300px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
                        {{ specialAppoint }}
                    </div>
                    <div v-if="specialAppoint && isopenmore" style="width: 300px;">
                        {{ specialAppoint }}
                    </div>
                    <img @click="changeisopenmore(0)" v-if="showmore && !isopenmore"
                         style="width: 16px;height: 16px;transform: rotate(90deg);cursor: pointer;margin-top: 10px"
                         src="../assets/common/arrow.png" alt=""/>
                    <img @click="changeisopenmore(1)" v-if="showmore && isopenmore"
                         style="width: 16px;height: 16px;transform: rotate(-90deg);cursor: pointer;margin-top: 10px"
                         src="../assets/common/arrow.png" alt=""/>
                </div>
            </div>
            <div class="alert-bottom">
                <button class="alert-bottom-btn btn btn-white-blue btn-alone white" @click="isManualPopup = false">
                    取消
                </button>
                <button class="alert-bottom-btn btn btn-green btn-alone " @click="onManualEntry">
                    提交审核
                </button>
            </div>
        </alert-box>
        <!-- 导入名单格式错误弹窗 -->
        <el-dialog v-model="isFormError" width="450px" title="名单格式错误人员" center @close="onFormError">
            <div class="edit-popup-box">
                <div class="row row-uninsured" v-for="(item, index) in formErrorList" v-bind:key="index">
                    <div>姓名：{{ item.name }} 身份证：({{ item.code }})</div>
                </div>
            </div>
        </el-dialog>
        <!-- 提示弹窗 -->
        <el-dialog v-model="isUninsuredPopup" width="450px" title="未投保人员" center>
            <div class="edit-popup-box">
                <div class="row row-uninsured" v-for="(item, index) in uninsuredList" v-bind:key="index">
                    姓名：{{ item.userName }} 身份证：（{{
                        item.idCardNo.replace(
                            /(.{3})(?:\d+)(.{4})$/,
                            '$1*********$2'
                        )
                    }}）
                </div>
            </div>
        </el-dialog>
        <!-- 确认提交弹窗 -->
        <alert-box class="remind-popup" data-Title="确认提交" v-if="isRemindPopup" @close="isRemindPopup = false">
            <div class="remind-popup-box">
                <div class="remind-i">
                    <div class="remind-i-title">
                        保险：
                    </div>
                    <div class="remind-i-name">
                        {{ tioInfo.insurCompanyPlanName }}
                    </div>
                </div>
                <div class="remind-i">
                    <div class="remind-i-title">
                        状态：
                    </div>
                    <div :class="[
                        'operation-type-box',
                        insurance !== 'add'
                            ? 'operation-type-box-active'
                            : ''
                    ]">
                        <img v-if="insurance === 'add'" class="operation-type-img"
                             src="../assets/long-insure/add-safe.png"/>
                        <img v-if="insurance !== 'add'" class="operation-type-img"
                             src="../assets/long-insure/reduce-safe.png"/>
                        {{ insurance !== 'add' ? '减保' : '加保' }}
                    </div>
                </div>
                <div class="remind-i">
                    <div class="remind-i-title">
                        人数：
                    </div>
                    <!--          filter(item => item.errMsg)-->
                    <div class="remind-i-name">
                        {{
                            insurance === 'reduce'
                                ? addList.filter(item => !item.errMsg).length
                                : addList.length
                        }}人
                    </div>
                </div>
                <div class="remind-i">
                    <div class="remind-i-title">
                        日期：
                    </div>
                    <div class="remind-i-name">
                        {{ date ? date : '请先选择时间' }}
                        {{ insurance === 'add' ? '生效' : '失效' }}
                    </div>
                </div>
                <div class="remind-i alert-bottom" style="box-shadow: none;">
                    <button class="alert-bottom-btn btn btn-white-blue btn-alone white" @click="isRemindPopup = false">
                        <!-- <i class="el-icon el-icon-plus" /> -->
                        取消
                    </button>
                    <!-- 加保提交 -->
                    <button class="alert-bottom-btn btn btn-green btn-alone " v-if="insurance === 'add'"
                            @click="insureAdd">
                        提交
                    </button>
                    <!-- 减保提交 -->
                    <button class="alert-bottom-btn btn btn-green btn-alone " v-if="insurance !== 'add'"
                            @click="insureReduce">
                        提交
                    </button>
                </div>
            </div>
        </alert-box>
        <!-- 加保成功弹窗 -->
        <alert-box class="success-popup" data-Title="操作成功" v-if="isSuccessPopup" @close="isSuccessPopup = false">
            <div class="success-popup-box">
                <img src="../assets/long-insure/success.png" alt=""/>
                <div class="title">
                    操作成功
                </div>
                <div class="num">
                    {{ insurance === 'add' ? '加保' : '减保' }}人数{{
                        insurance === 'add'
                            ? addList.length
                            : addList.filter(item => !item.errMsg).length
                    }}人
                </div>
                <button class="btn" style="marginLeft:0px;" @click="
                    $router.push({
                        path: '/long-insure/detail/' + $route.params.id
                    })
                    ">
                    确定
                </button>
            </div>
        </alert-box>
        <alert-box class="checkout" v-if="enterErrorList?.length > 0" @close="close()">
            <div class="form-error">
                <div class="manipulate-mistake">
                    操作错误
                </div>
                <el-alert :title="`以下人员身份信息错误，请修改后重新上传`" type="error" center show-icon/>
                <div class="error-table">
                    <el-table :data="enterErrorList" :header-row-style="{ color: 'black' }"
                              :row-style="{ border: 'none' }" style="width: 100%">
                        <el-table-column label="行号" prop="index"/>
                        <el-table-column prop="userName" label="姓名"/>
                        <el-table-column prop="idCardNo" label="身份证号"/>
                        <el-table-column label="错误信息">
                            <template #default="scope">
                                <p>
                                    {{ scope.row.msg }}
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="receive">
                    <button class="btn obtain" @click="close()">
                        知道了
                    </button>
                </div>
            </div>
        </alert-box>
        <alert-box class="success-popup" v-if="isRenew" @close="isRenew = false">
            <div class="insure-box">
                <div class="insure-box-info">
                    <div class="title">
                        本次投保金额
                        <text> {{ testingInsureInfo.needCostFeeMonth }}</text>
                        元
                    </div>
                    <div class="name-box">
                        <div class="name" v-if="testingInsureInfo.price">
                            3类月单单价
                            <text class="num">
                                {{ testingInsureInfo.price }}
                            </text>
                            元
                        </div>
                        <div class="name" v-if="testingInsureInfo.priceFour">
                            4类月单单价
                            <text class="num">
                                {{ testingInsureInfo.priceFour }}
                            </text>
                            元
                        </div>
                        <div class="name" v-if="testingInsureInfo.priceFive">
                            5类月单单价
                            <text class="num">
                                {{ testingInsureInfo.priceFive }}
                            </text>
                            元
                        </div>
                        <div class="name">
                            本次投保
                            <text class="num">
                                {{ testingInsureInfo.needCreateCount }}
                            </text>
                            人
                        </div>
                        <div class="name">
                            抵扣人数
                            <text class="num">
                                {{ testingInsureInfo.deductionCount }}
                            </text>
                            人
                        </div>
                    </div>
                </div>
                <div class="insure-box-btn insure-box-btn-active">
                    <button class="btn btn-white-blue btn-white-blue-active" @click="isRenew = false">
                        取消
                    </button>
                    <button class="btn btn-green btn-green-active" @click="insureAdd">
                        确定投保
                    </button>
                </div>
            </div>
        </alert-box>

        <alert-box class="success-popup" v-if="isRenewAmount" @close="isRenewAmount = false">
            <div class="insure-box">
                <div class="insure-box-info">
                    <div class="title">本次投保账户余额不足</div>
                    <div class="name-box">
                        <div class="name">因当前待生效</div>
                        <div class="name">
                            保单金额为
                            <text class="num">
                                {{
                                    testingInsureInfo.tomorrowNeedCostFee
                                }}
                            </text>
                            元
                        </div>
                        <div class="name">
                            当前余额为
                            <text class="num">
                                {{ testingInsureInfo.currentBalance }}
                            </text>
                            元
                        </div>
                        <div class="name">
                            本次投保金额
                            <text class="num">
                                {{ testingInsureInfo.willEnsureCostFee }}
                            </text>
                            元
                        </div>
                        <div class="name ">
                            导致本次投保保费不足。请充值后重试
                        </div>
                    </div>
                </div>
                <div class="insure-box-btn insure-box-active insure-box-btn-active">
                    <button class="btn btn-green" @click="isRenewAmount = false">
                        我知道啦
                    </button>
                </div>
            </div>
        </alert-box>
    </div>
    <div class="foot">
        <div class="foot-operation">
            <div class="select-delete">
                <div class="select-delete" v-if="selectionList.length > 0">
                    已选择<span class="num">{{ selectionList.length }}</span>项
                </div>
                <div class="delete point" @click="batchDelete" v-if="selectionList.length > 0">
                    删除选中
                </div>
            </div>
            <div class="foot-btn-box">
                <button class="btn btn-white-blue" v-if="selectionList.length > 0 && insurance === 'add'"
                        @click="onDisplayIsEditPopup('batch')">
                    设置工种
                </button>
                <button v-if="insureRenewal" class="btn btn-red" style="background:#1989FA;margin: 20px 0 20px 10px;"
                        @click="onTestingInsure">
                    一键续保
                </button>
                <button v-if="insurance === 'add' && !insureRenewal" class="btn btn-red"
                        style="background:#1989FA;margin: 20px 0 20px 10px;" @click="isRemindPopup = true">
                    确认加保
                </button>
                <button v-if="insurance === 'reduce'" class="btn btn-red" style="background:#1989FA;margin: 20px 0;"
                        @click="isRemindPopup = true">
                    确认减保
                </button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import store from '@/store'
import dayjs from 'dayjs'
import { defineComponent } from 'vue'
import {
    getInsureDetailInfo,
    getDispatchList,
    insureAdd,
    insureCheckReduce,
    insureReduce,
    checkoutIdCardNoList,
    checkoutIdCardNoListTwo,
    addListInformation,
    renewalMonthNotify,
    testingInsure
} from '@/api/long-insure'
import personnelQueryPopup from '../components/personnel-query-popup.vue'
import AlertBox from '@/components/alert-box.vue'
import ExcelJS from 'exceljs'
import { ElLoading, ElMessage } from 'element-plus'
import { getCardAge, formTesting, dateFormat } from '@/utils/util'
import { getsaasCompanyinfoapi } from '@/api/base'

export default defineComponent({
    name: 'LongInsureAddSubtract',
    components: {
        personnelQueryPopup,
        AlertBox
    },
    data() {
        return {
            specialAppointisSelect: false,
            showmore: true,
            isopenmore: true,
            specialAppoint: '1、仅承保视频中的对应风险等级工种，其它工种请再提供视频确认2、超风险投保警示:严格按照实际工种对应风险等线进行投保，严禁超风险投保，否则保险公司有权拒赔。如将4类及以上工种投保至1-3类工种属于超风险投保工种',
            insurance: 'add' as string | string[], // 保险状态 add 加保 reduce 减保
            selectionList: [] as string[],
            tioInfo: {} as any,
            date: '',
            isPopup: false,
            addList: [] as any,
            addCloneList: [] as addListInformation[],
            cloneAddList: [] as addListInformation[],
            addPageNum: 0,
            addPageSize: 100000,
            isEditPopup: false,
            isEditTypePopup: '',
            companyDetailList: [] as any, // 派遣单位详细信息列表
            companyDetailId: '',
            companyDetailName: '',
            workTypeList: [] as any[],
            workTypeId: '',
            workTypeName: '',
            fileList: [] as { name: string }[],
            userList: [] as any,
            isManualPopup: false,
            manualName: '',
            manualCode: '',
            isUninsuredPopup: false,
            uninsuredList: [] as any,
            selectedIdCardNo: 0,
            isRemindPopup: false, // 确认提交提醒弹窗
            isSuccessPopup: false, // 加保 或 减保 成功弹窗
            companyList: [] as string[],
            searchType: '',
            isCheckout: false,
            enterErrorList: {},
            companyPlanId: '' as string | string[],
            formErrorList: [] as { name: string; code: string }[],
            isFormError: false,
            datePickerDisabled: false,
            insureRenewal: '',
            isRenew: false,
            isRenewAmount: false,
            testingInsureInfo: {} as {
                price?: number;
                priceFour?: number;
                priceFive?: number;
                needCreateCount?: number;
                deductionCount?: number;
                needCostFeeMonth?: number;
                tomorrowNeedCostFee?: number;
                currentBalance?: number;
                willEnsureCostFee?: number;
            },
            loaded: false
        }
    },
    async created() {
        console.log(this.$route.params, 'this.$route.params')
        this.insurance = this.$route.params.type
        if (this.$route.params.echo) {
            this.insureRenewal = this.$route.params.echo as string
            await this.onNextMonth()
            await this.getRenewalMonthNotify()
        }
        if (this.$route.params.type === 'add') {
            (store.state.titles[2] as string) = '加保'
            // this.date = dayjs().add(1, 'day').format('YYYY-MM-DD')
        } else {
            (store.state.titles[2] as string) = '减保'
            // this.date = dayjs().format('YYYY-MM-DD')
        }
        this.getInsureDetailInfo()
        this.companyPlanId = this.$route.params.id
    },
    methods: {
        onFocuse() {
            if (!this.companyDetailId) {
                ElMessage({
                    message: '请选择派遣单位',
                    type: 'warning'
                })
            } else {
                if (!this.workTypeList.length) {
                    ElMessage({
                        message: '很抱歉，您当前所选择派遣单位的可用工种，不在该方案的承保范围内，请联系您的专属客户经理。',
                        type: 'warning'
                    })
                } else {
                }
            }
        },
        downLoadTemp() {
            window.open('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/template/投保人员名单模板.xlsx')
        },
        changeisopenmore(i: number) {
            if (i === 1) {
                this.isopenmore = false
            } else {
                this.isopenmore = true
            }
        },
        sglr() {
            this.isManualPopup = true
            this.specialAppointisSelect = false
            this.workTypeId = ''
            this.companyDetailId = ''
            this.manualCode = ''
            this.manualName = ''
        },
        // 显示弹窗弹窗
        onDisplayIsEditPopup(type: string) {
            this.specialAppointisSelect = false
            this.isEditTypePopup = type
            this.isEditPopup = true
        },
        // 基本信息
        async getInsureDetailInfo() {
            const result = await getInsureDetailInfo({
                planId: this.$route.params.id,
                month: ''
            })
            this.tioInfo = result
            console.log(result, 'resultresultresultresultresult')
            if (result.insurCompany === 'period_015_gwy') {
                this.datePickerDisabled = true
                if (this.$route.params.type === 'add') {
                    this.date = dayjs().add(1, 'day').format('YYYY-MM-DD')
                    ElMessage({
                        message: '此方案加保时间不可修改',
                        type: 'warning'
                    })
                } else {
                    this.date = dayjs().format('YYYY-MM-DD')
                    ElMessage({
                        message: '此方案减保时间不可修改',
                        type: 'warning'
                    })
                }
            } else if (!this.$route.params.echo) {
                if (this.$route.params.type === 'add') {
                    this.date = result.type === 5 ? dayjs().format('YYYY-MM-DD') : dayjs().add(1, 'day').format('YYYY-MM-DD')
                } else {
                    this.date = dayjs().format('YYYY-MM-DD')
                }
            }
        },
        // 在线选择
        onlineSelection() {
            this.isPopup = true
        },
        // 减保复选框
        checkMaterialStatus(row: any, column: any, cellValue: any, index: any) {
            // this.addList.filter(item => item.errMsg)
            if (row.errMsg === '未投保') {
                // eslint-disable-next-line no-unused-expressions
                return false
            } else {
                return true
            }
        },
        // 减保样式变化
        reduceTable(row: any) {
            if (row.row.errMsg === '未投保') {
                return 'background-color: rgba(230,230,230,0.1);' // 修改的样式
            } else {
                return 'color: #000000'
            }
        },
        // 减保未投保排序
        changeSort(row: any) {
            // eslint-disable-next-line no-constant-condition
            const nums1 = '未投保' ? 1 : 0
            const nums2 = 0
            return nums1 - nums2
        },
        // 在线选择完成
        async insureComplete(event: addListInformation[]) {
            event.forEach((item: addListInformation, index: number) => {
                event[index].joinType = 1
            })
            this.addList.push(...event)
            this.addCloneList.push(...event)
            if (this.$route.params.type === 'reduce') {
                this.addList.sort((a: any, b: any) => {
                    return (b.errMsg ? 1 : 0) - (a.errMsg ? 1 : 0)
                })
            }
            // 去重
            for (let i = 0; i < this.addList.length; i++) {
                for (let j = i + 1; j < this.addList.length; j++) {
                    if (this.addList[i].idCardNo === this.addList[j].idCardNo) {
                        this.addList.splice(j, 1)
                        j = j - 1
                    }
                }
            }
            await this.interceptList()
            this.isPopup = false
            this.preparationRecord()
        },
        // 筛选公司列表
        preparationRecord() {
            this.searchType = ''
            // this.companyList = []
            // this.addList = this.addCloneList
            const arr = this.addCloneList
                .map((item: { serveCompanyName: string }) => {
                    return item.serveCompanyName
                })
                .filter((n: null | string) => {
                    return n
                })
            this.companyList = arr.reduce(function (
                    prev: string[],
                    next: string
                ) {
                    prev.indexOf(next) === -1 && prev.push(next)
                    return prev
                },
                [])
        },
        // 截取数据
        interceptList() {
            this.cloneAddList = this.addList.slice(
                (this.addPageNum ? this.addPageNum - 1 : 0) * this.addPageSize,
                (this.addPageNum ? this.addPageNum : this.addPageNum + 1) *
                this.addPageSize
            )
        },
        // 单个删除
        async deletePersonnel(idCardNo: string) {
            this.addList = this.addList.filter(
                (item: { idCardNo: string }) => item.idCardNo !== idCardNo + ''
            )
            // await this.interceptList()
            this.$message.success('删除成功！')
            this.addCloneList = this.addCloneList.filter(
                (item: { idCardNo: string }) => item.idCardNo !== idCardNo + ''
            )
            this.preparationRecord()
        },
        // 批量删除
        async batchDelete() {
            this.selectionList.forEach((item: string, index: number) => {
                this.addList = this.addList.filter(
                    (ite: { idCardNo: string }) =>
                        item + '' !== ite.idCardNo + ''
                )
                this.addCloneList = this.addCloneList.filter(
                    (ite: { idCardNo: string }) =>
                        item + '' !== ite.idCardNo + ''
                )
            })
            // this.addCloneList = this.addList
            this.preparationRecord()
            this.$message.success('批量删除成功！')
        },
        // 勾选或
        handleSelectionChange(event: addListInformation[]) {
            this.selectionList = event.map((item: addListInformation) => {
                return item.idCardNo
            })
        },
        // 编辑人员信息
        async editPersonnelInfo(id: number, type: string, row: any) {
            console.log(44444, row)
            this.specialAppointisSelect = false
            this.companyDetailId = row.serveCompanyId
            this.companyDetailList = [
                {
                    serveCompanyName: row.serveCompanyName,
                    serveCompanyId: row.serveCompanyId
                }
            ]

            this.workTypeId = row.occupationId
            this.workTypeList = row.occupationList || []

            if (!row?.occupationList?.length) {
                await this.getCompanyDetailList()
                const cur = this.companyDetailList.find(
                    (i: any) => i.serveCompanyId === row.serveCompanyId
                )
                if (cur) {
                    this.workTypeList = cur.occupationList
                }
            }

            this.isEditTypePopup = type
            this.selectedIdCardNo = id
            const userInfo = this.addList.filter(
                (item: addListInformation) =>
                    this.selectedIdCardNo + '' === item.idCardNo
            )
            const {
                userName,
                idCardNo
            } = userInfo[0]
            this.manualName = userName
            this.manualCode = idCardNo
            this.isEditPopup = true
        },
        // 获取派遣单位详细信息
        async getCompanyDetailList() {
            this.loaded = false
            const result = await getDispatchList({
                pageNum: 1,
                pageSize: 99999,
                status: 1,
                isGetFile: 1,
                searchText: '',
                insurCompany: this.tioInfo.insurCompany,
                planCode: this.tioInfo.insurCompanyPlanCode,
                isGetArea: 1
            })
            this.loaded = true
            this.companyDetailList = result.list
        },
        // 选择派遣单位
        async onSelectCompany(e: any) {
            let result: any = await getsaasCompanyinfoapi({ planId: this.$route.params.id })
            this.specialAppointisSelect = false
            this.companyDetailList.forEach((item: any, i: number) => {
                if (e === item.serveCompanyId) {
                    if (item.isBlacklist || item.isForbidden) {
                        this.companyDetailId = ''
                        // } else if (item.area === '天津' && this.tioInfo.insurCompany === 'period_006_gyas') {
                    } else if (item.area === '天津' && !result.isWhitelist && this.tioInfo.insurCompany === 'period_006_gyas') {
                        ElMessage.warning('抱歉，当前方案不支持该（天津）地区投保')
                        this.companyDetailId = ''
                    } else {
                        this.specialAppoint = '1、仅承保视频中的对应风险等级工种，其它工种请再提供视频确认2、超风险投保警示:严格按照实际工种对应风险等线进行投保，严禁超风险投保，否则保险公司有权拒赔。如将4类及以上工种投保至1-3类工种属于超风险投保工种'
                    }
                }
            })
            if (this.companyDetailId) {
                const arr: any = this.companyDetailList.filter(
                    (item: {
                        serveCompanyId: string | number;
                        occupationList: any;
                    }) => {
                        if (item.serveCompanyId === this.companyDetailId) {
                            return item
                        }
                    }
                )
                console.log(11111, arr)
                if (!arr[0].occupationList?.length) {
                    ElMessage.warning('很抱歉，您当前所选择派遣单位的可用工种，不在该方案的承保范围内，请联系您的专属客户经理。')
                }
                this.workTypeList = arr[0].occupationList
                this.workTypeId = ''
            } else {
                this.workTypeList = []
                this.workTypeId = ''
            }
        },
        // 取消更改
        onCancelModification() {
            this.manualName = ''
            this.manualCode = ''
            this.workTypeList = []
            this.isEditPopup = false
        },
        // 确定更改
        async onConfirmModification() {
            if (!this.specialAppointisSelect && this.specialAppoint) {
                ElMessage({
                    message: '请勾选特别约定',
                    type: 'warning'
                })
            } else if (!this.workTypeId) {
                ElMessage({
                    message: '请选择工种',
                    type: 'warning'
                })
            } else {
                // 多选编辑
                const company: any = this.companyDetailList.filter(
                    (item: any) => item.serveCompanyId === this.companyDetailId
                )
                const workType: any = this.workTypeList.filter(
                    (item: any) => item.id === this.workTypeId
                )

                console.log(1111, workType, this.workTypeList, this.addList)
                if (this.isEditTypePopup === 'batch') {
                    this.selectionList.forEach((item: string) => {
                        this.addList.forEach(
                            (ite: addListInformation, index: number) => {
                                if (item === ite.idCardNo) {
                                    this.addList[index].serveCompanyName =
                                        company[0].serveCompanyName
                                    this.addList[index].occupationName =
                                        workType[0].name
                                    this.addList[
                                        index
                                        ].serveCompanyId = this.companyDetailId
                                    this.addList[
                                        index
                                        ].occupationId = this.workTypeId
                                    this.addList[index].level =
                                        workType[0].level
                                    this.addList[
                                        index
                                        ].occupationList = this.workTypeList
                                    this.addList[
                                        index
                                        ].specialAppoint = this.specialAppoint
                                    // this.addList[index].userName = this.manualName
                                    // this.addList[index].idCardNo = this.manualCode
                                }
                            }
                        )
                    })
                    this.addList.sort((a: any, b: any) => {
                        return (a.errMsg ? 1 : 0) - (b.errMsg ? 1 : 0)
                    })
                    this.isEditPopup = false
                    this.companyDetailList = []
                    this.workTypeList = []
                    this.companyDetailId = ''
                    this.workTypeId = ''
                } else {
                    // 单选编辑
                    const loading = await ElLoading.service({
                        fullscreen: true,
                        text: '姓名身份证校验中...'
                    })
                    // 身份证号姓名校验
                    const checkoutIdCardNoResTwo = await checkoutIdCardNoListTwo(
                        [
                            {
                                userName: this.manualName,
                                idCardNo: this.manualCode
                            }
                        ]
                    )
                    if (checkoutIdCardNoResTwo.code === 1) {
                        //  弹窗展示错误人员
                        this.$message.error(
                            checkoutIdCardNoResTwo.data[0].msg as string
                        )
                        await loading.close()
                        return
                    }
                    this.addList.forEach(
                        (ite: addListInformation, index: number) => {
                            if (this.selectedIdCardNo + '' === ite.idCardNo) {
                                // 只有加保才需要 赋值 工种名字
                                if (this.insurance === 'add') {
                                    this.addList[index].serveCompanyName =
                                        company[0].serveCompanyName
                                    this.addList[index].occupationName =
                                        workType[0].name
                                    this.addList[index].level =
                                        workType[0].level
                                    this.addList[
                                        index
                                        ].serveCompanyId = this.companyDetailId
                                    this.addList[
                                        index
                                        ].occupationId = this.workTypeId
                                }
                                this.addList[index].userName = this.manualName
                                this.addList[
                                    index
                                    ].specialAppoint = this.specialAppoint
                                this.addList[
                                    index
                                    ].idCardNo = this.manualCode.replace(/x/g, 'X')
                            }
                        }
                    )
                    if (this.$route.params.type === 'reduce') {
                        const test = this.addList.map((item: any) => {
                            return {
                                userName: item.userName,
                                idCardNo: item.idCardNo
                            }
                        })
                        const checkoutIdCardNoRes = await checkoutIdCardNoList({
                            companyPlanId: Number(this.$route.params.id),
                            workerInfoList: test as [
                                { userName: string; idCardNo: string | number }
                            ]
                        })
                        for (let i = 0; i < this.addList.length; i++) {
                            for (let j = i + 1; j < this.addList.length; j++) {
                                if (
                                    this.addList[i].idCardNo ===
                                    this.addList[j].idCardNo
                                ) {
                                    this.addList.splice(j, 1)
                                    j = j - 1
                                }
                            }
                        }
                        if (checkoutIdCardNoRes.errorList.length > 0) {
                            for (
                                let i = 0;
                                i < checkoutIdCardNoRes.errorList.length;
                                i++
                            ) {
                                for (let j = 0; j < this.addList.length; j++) {
                                    if (
                                        checkoutIdCardNoRes.errorList[i]
                                            ?.idCardNo ===
                                        this.addList[j]?.idCardNo
                                    ) {
                                        this.addList[j].errMsg = '未投保'
                                        i++
                                    } else {
                                        this.addList[j].errMsg = ''
                                    }
                                }
                            }
                        } else {
                            for (let j = 0; j < this.addList.length; j++) {
                                this.addList[j].errMsg = ''
                            }
                        }

                        this.addList.sort((a: any, b: any) => {
                            return (b.errMsg ? 1 : 0) - (a.errMsg ? 1 : 0)
                        })
                    }

                    this.isEditPopup = false
                    this.companyDetailList = []
                    this.workTypeList = []
                    this.companyDetailId = ''
                    this.workTypeId = ''
                }
                // this.addCloneList = this.addList
                await this.preparationRecord()
            }
        },
        search() {
            if (this.searchType !== '') {
                this.addList = this.addCloneList
                const arr = this.addList.filter(
                    (item: addListInformation) =>
                        item.serveCompanyName ===
                        this.companyList[Number(this.searchType)]
                )
                this.addList = arr
            } else {
                return (this.addList = this.addCloneList)
            }
        },
        onReset() {
            this.searchType = ''
            this.addList = this.addCloneList
        },
        close() {
            this.enterErrorList = {}
        },
        // 上传
        async onUpFile(file: File) {
            console.log(77777, file)
            const loading = await ElLoading.service({
                fullscreen: true,
                text: '名单信息校验中...'
            })
            const userList = [] as {
                userName: string;
                idCardNo: string;
                serveCompanyName: string;
                occupationName: string;
                joinType: number;
                errMsg?: string;
            }[]
            const reader = new FileReader()
            const errorList = [] as any
            reader.onload = async e => {
                const workbook = new ExcelJS.Workbook()
                await workbook.xlsx.load(
                    (e.target as FileReader).result as ArrayBuffer
                )
                console.log(workbook.getWorksheet(1), 'workbookworkbookworkbook')

                workbook.getWorksheet(1).eachRow(async (item, index) => {
                    // 单个检验表格文字是否正常
                    const arrError = formTesting(
                        item.getCell(1).value as any,
                        item.getCell(2).value as any
                    )
                    this.formErrorList.push(arrError)
                    if (index <= 1) {
                        return item
                    }
                    userList.push({
                        userName:
                            arrError.name || (item.getCell(1).value as string),
                        idCardNo:
                            arrError.code ||
                            (item.getCell(2).value as string).replace(
                                /x/g,
                                'X'
                            ),
                        serveCompanyName: item.getCell(3).value as string,
                        occupationName: item.getCell(4).value as string,
                        joinType: 2
                    })
                })
                this.formErrorList = this.formErrorList.filter(
                    item => item.name
                )
                // if (this.formErrorList.length > 0) {
                //   // formErrorList: [] as string[],
                //   // isFormError: false
                //   this.isFormError = true
                //   // this.$message.error(errorList.toString() + ',表单格式错误')
                //   await loading.close()
                //   // return
                // }

                const staffList = userList.map(
                    (
                        item: {
                            idCardNo: string;
                            joinType: number;
                            serveCompanyName: string;
                            userName: string;
                        },
                        index: number
                    ) => {
                        return {
                            userName: item.userName,
                            idCardNo: item.idCardNo
                            // index: index + 1
                        }
                    }
                )
                if (this.$route.params.type === 'add') {
                    const verification = await checkoutIdCardNoListTwo(
                        userList.map((item, index) => {
                            return {
                                userName: item.userName,
                                idCardNo: item.idCardNo,
                                index: index + 1
                            }
                        })
                    )
                    this.enterErrorList = verification.data
                    // if (verification.code === 1) {
                    //     this.enterErrorList = verification.data
                    //     return
                    // }
                    if (verification.data) {
                        return
                    } else {
                        this.userList = userList
                    }
                    // this.userList = userList
                    // this.handleCurrentChange(1)
                } else {
                    const verificationTwo = await checkoutIdCardNoListTwo(
                        userList.map((item, index) => {
                            return {
                                userName: item.userName,
                                idCardNo: item.idCardNo,
                                index: index + 1
                            }
                        })
                    )
                    this.enterErrorList = verificationTwo.data
                    // if (verification.code === 1) {
                    //     this.enterErrorList = verification.data
                    //     return
                    // }
                    if (verificationTwo.data) {
                        return
                    }

                    const verification = await checkoutIdCardNoList({
                        companyPlanId: Number(this.$route.params.id),
                        workerInfoList: staffList as [
                            {
                                index?: number | undefined;
                                userName: string;
                                idCardNo: string | number;
                                msg?: string | undefined;
                            }
                        ]
                    })

                    // eslint-disable-next-line no-unused-expressions
                    for (let i = 0; i < verification.errorList.length; i++) {
                        for (let j = 0; j < userList.length; j++) {
                            if (
                                verification.errorList[i].idCardNo ===
                                userList[j].idCardNo
                            ) {
                                userList[j].errMsg = '未投保'
                            }
                        }
                    }
                    // userList = [...verification.errorList, ...verification.correctList]
                    // this.enterErrorList = verification?.errorList

                    // if (verification?.errorList) {
                    //     return
                    // } else {
                    // eslint-disable-next-line no-undef

                    // }
                }
                const unit = await getDispatchList({
                    pageNum: 1,
                    pageSize: 50,
                    status: 1,
                    isGetFile: 1,
                    searchText: '',
                    insurCompany: this.tioInfo.insurCompany,
                    planCode: this.tioInfo.insurCompanyPlanCode
                })
                const name: {
                    serveCompany: any;
                    name: any;
                    occupationId: number | null;
                    serveCompanyId: number | null;
                    occupationList: [];
                }[] = []

                unit.list.forEach((item: any) => {
                    console.log(8999, item)
                    if (item.occupationList.length === 1) {
                        // occupationId:
                        name.push({
                            serveCompany: item?.serveCompanyName,
                            name: item.occupationList[0].name,
                            occupationId: item?.occupationList[0].id,
                            serveCompanyId: item?.serveCompanyId,
                            occupationList: item?.occupationList
                        })
                    } else {
                        name.push({
                            serveCompany: item?.serveCompanyName,
                            name: null,
                            occupationId: null,
                            serveCompanyId: item?.serveCompanyId,
                            occupationList: item?.occupationList
                        })

                        if (this.tioInfo.type === 3) {
                            item.occupationList = item.occupationList.filter(
                                (item: any) => {
                                    return item.level !== '5'
                                }
                            )
                        }
                        const result = item.occupationList.sort(
                            (a: any, b: any) => {
                                return b.level - a.level
                            }
                        )
                        // item.occupationList.sort((item:any) => {
                        //     item.occupationList[0].level
                        // })
                        // name.push(serveCompany:result[0].)
                        name[name.length - 1].name = result[0]?.name
                        name[name.length - 1].occupationId = result[0]?.id
                    }
                    return name
                })
                userList.forEach((item: any) => {
                    const curIndex = name.findIndex(
                        i => item.serveCompanyName === i.serveCompany
                    )
                    if (curIndex !== -1) {
                        item.serveCompanyId = name[curIndex].serveCompanyId
                        item.occupationList = name[curIndex].occupationList
                        if (item.occupationName) {
                            const curOcpation = item.occupationName.replace(
                                /[\(|（]\d\W[\)|）]/g,
                                ''
                            )
                            const idx = name[curIndex].occupationList.findIndex(
                                (j: any) => j.name === curOcpation
                            )
                            if (idx !== -1) {
                                item.occupationId = (name[curIndex]
                                    .occupationList[idx] as any).id
                                item.occupationName = (name[curIndex]
                                    .occupationList[idx] as any).name
                                item.level = (name[curIndex].occupationList[
                                    idx
                                    ] as any).level
                            }
                        }
                    }
                    // name.map((items: any) => {
                    //   if (
                    //     item.serveCompanyName &&
                    //     item.serveCompanyName === items.serveCompany
                    //   ) {
                    //     item.occupationName = items.name
                    //     item.occupationId = items.occupationId
                    //     item.serveCompanyId = items.serveCompanyId
                    //     return item
                    //   }
                    //   return item
                    // })
                })
                // if(userList.)
                this.userList = userList

                console.log(666666, this.userList)
                //       as [{
                //   errMsg: string
                //   idCardNo: string
                //   userName: string
                // }]
                // .errorList

                // if (verification.code === 1) {
                //     this.enterErrorList = verification.data
                //     return
                // }

                // this.userList = userList
                // this.handleCurrentChange(1)
                // 校验通过
                await loading.close()
                this.addList.push(...this.userList)

                console.log(9999, this.addList)
                for (let i = 0; i < this.addList.length; i++) {
                    for (let j = i + 1; j < this.addList.length; j++) {
                        if (
                            this.addList[i].idCardNo ===
                            this.addList[j].idCardNo
                        ) {
                            this.addList.splice(j, 1)
                            j = j - 1
                        }
                    }
                }
                this.addList.sort((a: any, b: any) => {
                    return (b.errMsg ? 1 : 0) - (a.errMsg ? 1 : 0)
                })
                this.addCloneList = this.addList
                this.interceptList()
                await this.preparationRecord()
            }
            reader.readAsBinaryString(file)
            this.fileList.push({
                name: file.name
            })
        },
        // 手动录入
        async onManualEntry() {
            this.manualName = this.manualName.replace(/\s*/g, '')
            this.manualName = this.manualName.replace(/\./g, '·')
            this.manualCode = this.manualCode.replace(/\s*/g, '')
            this.manualCode = this.manualCode.replace(/x/g, 'X')
            if (!this.specialAppointisSelect && this.specialAppoint) {
                ElMessage({
                    message: '请勾选特别约定',
                    type: 'warning'
                })
                return
            }
            if (!this.manualCode) {
                this.$message.error('请输入身份证')
                return
            }
            const age = getCardAge(this.manualCode)
            if (age < 16) {
                this.$message.error('小于16岁不可投保')
                return
            }
            if (!this.manualName) {
                this.$message.error('请输入姓名')
                return
            }
            if (!this.workTypeId && this.insurance === 'add') {
                this.$message.error('请选择工类')
                return
            }
            if (!this.companyDetailId && this.insurance === 'add') {
                this.$message.error('请输入派遣单位')
                return
            }
            const loading = await ElLoading.service({
                fullscreen: true,
                text: '姓名身份证校验中...'
            })
            let errMsg = ''
            if (this.$route.params.type === 'reduce') {
                // 身份证号姓名校验
                const checkoutIdCardNoResTwo = await checkoutIdCardNoListTwo([
                    {
                        userName: this.manualName,
                        idCardNo: this.manualCode
                    }
                ])
                if (checkoutIdCardNoResTwo.code === 1) {
                    this.$message.error(
                        checkoutIdCardNoResTwo.data[0].msg as string
                    )
                    await loading.close()
                    return
                }

                // 身份证号姓名校验
                const checkoutIdCardNoRes = await checkoutIdCardNoList({
                    companyPlanId: Number(this.$route.params.id),
                    workerInfoList: [
                        {
                            userName: this.manualName,
                            idCardNo: this.manualCode
                        }
                    ]
                    // userName: this.manualName,
                    // idCardNo: this.manualCode
                })
                errMsg = checkoutIdCardNoRes.errorList[0]?.errMsg
                // if (checkoutIdCardNoRes.errorList) {
                //     this.$message.error('该人员未加保')
                //     await loading.close()
                //     return
                // }
            } else {
                // 身份证号姓名校验
                const checkoutIdCardNoRes = await checkoutIdCardNoListTwo([
                    {
                        userName: this.manualName,
                        idCardNo: this.manualCode
                    }
                ])
                if (checkoutIdCardNoRes.code === 1) {
                    this.$message.error(
                        checkoutIdCardNoRes.data[0].msg as string
                    )
                    await loading.close()
                    return
                }
            }

            if (this.insurance === 'add') {
                var company: any = this.companyDetailList.filter(
                    (item: any) => item.serveCompanyId === this.companyDetailId
                )
                var workType: any = this.workTypeList.filter(
                    (item: any) => item.id === this.workTypeId
                )
            }

            const arr = this.addList
                .map((item: any) => {
                    if (item.idCardNo === this.manualCode) {
                        return item
                    }
                })
                .filter((n: any) => n)
            if (arr.length > 0) {
                this.$message.error('列表中已有该人员')
                return
            }
            await this.addList.push({
                userName: this.manualName,
                idCardNo: this.manualCode,
                // eslint-disable-next-line no-undef
                errMsg: this.insurance === 'reduce' && errMsg ? errMsg : '',
                serveCompanyName:
                    this.insurance === 'add' ? company[0].serveCompanyName : '',
                occupationName:
                    this.insurance === 'add' ? workType[0].name : '',
                joinType: 2,
                level: this.insurance === 'add' ? workType[0].level : '',
                serveCompanyId: this.companyDetailId,
                occupationId: this.workTypeId,
                specialAppoint: this.specialAppoint
            })
            this.addList.sort((a: any, b: any) => {
                return (b.errMsg ? 1 : 0) - (a.errMsg ? 1 : 0)
            })
            this.addCloneList = this.addList
            await this.interceptList()
            // companyDetailList workTypeList
            this.isManualPopup = false
            this.companyDetailList = []
            this.workTypeList = []
            this.companyDetailId = ''
            this.workTypeId = ''
            this.preparationRecord()
        },
        // 加保接口
        async insureAdd() {
            let isAdopt = false
            // const arr = [] as any
            this.addList.forEach((item: addListInformation) => {
                if (!item.occupationId) {
                    isAdopt = true
                }
            })
            if (isAdopt) {
                this.$message.error(
                    '当前有人未设置工种,或工种设置不正确,请重新设置'
                )
                return
            }
            const result = await insureAdd({
                companyPlanId: this.$route.params.id,
                insurStartDay: this.date,
                staffList: this.addList
            })
            this.isRenew = false
            if (result.code === 1 && result.errorList.length > 0) {
                this.isRemindPopup = false
                this.enterErrorList = result.errorList
                return
            }
            if (!result.isEnoughBalance && result.isSuccess === false) {
                this.$message.error('余额不足')
                return
            }
            this.$message.success('加保成功')
            this.isSuccessPopup = true
        },
        // 减保
        async insureReduce() {
            let arr = [] as any
            this.addList.forEach(
                (item: {
                    userName: string;
                    idCardNo: string;
                    errMsg?: string;
                }) => {
                    arr.push({
                        userName: item.userName,
                        idCardNo: item.idCardNo,
                        errMsg: item.errMsg
                    })
                }
            )
            arr = arr.filter((item: any) => !item.errMsg)
            // 减保前的 校验 检验他是否在保
            const checkResult = await insureCheckReduce({
                companyPlanId: this.$route.params.id,
                workerInfoList: arr
            })
            if (checkResult.errorList.length === 0) {
                const idS = [] as number[]
                checkResult.correctList.forEach((item: { id: number }) => {
                    idS.push(item.id)
                })
                const result = await insureReduce({
                    companyPlanId: this.$route.params.id,
                    insurEndDay: this.date,
                    ids: idS
                })
                this.$message.success('减保成功')
                this.isUninsuredPopup = false
                this.isSuccessPopup = true
            } else {
                this.isUninsuredPopup = true
                this.uninsuredList = checkResult.errorList
            }
            // const result = await insureReduce({})
        },
        // 关闭表格弹窗
        onFormError() {
            this.formErrorList = []
        },
        onNextMonth() {
            const time = new Date()
            const year = time.getFullYear()
            const month = time.getMonth() + 2
            this.date =
                dateFormat(
                    'YYYY-mm',
                    new Date(
                        (month === 13 ? year + 1 : year) +
                        '-' +
                        (month === 13 ? '01' : month)
                    )
                ) + '-01'
            console.log(this.date, 'fsyhusdgyusdgyjhu')
            this.datePickerDisabled = true
        },
        // 续保列表回显
        async getRenewalMonthNotify() {
            const result = await renewalMonthNotify({
                planId: this.$route.params.id
            })
            // addList
            const arr = result.staffList.map(
                (item: {
                    userName: string;
                    occupationLevel: number;
                    idCardNo: string;
                    occupationId: number;
                    occupationName: string;
                    serveCompanyId: number;
                    companyPlanName: string;
                    serveCompanyName: string;
                }) => {
                    return {
                        idCardNo: item.idCardNo,
                        joinType: 1,
                        level: item.occupationLevel,
                        occupationId: item.occupationId,
                        occupationName: item.occupationName,
                        serveCompanyId: item.serveCompanyId,
                        serveCompanyName: item.serveCompanyName,
                        userName: item.userName
                    }
                }
            )
            this.addList = arr
        },
        // 一键续保前置条件
        async onTestingInsure() {
            const result = await testingInsure({
                companyPlanId: Number(this.$route.params.id),
                insurStartDay: this.date,
                staffList: this.addList
            })
            this.testingInsureInfo = result
            if (result.errorList?.length > 0) {
                this.enterErrorList = result.errorList
            } else {
                this.isRenew = result.isSuccess
                this.isRenewAmount = !result.isSuccess
            }
        }
    }
})
</script>
<!-- padding 33px 24px 33px 24px -->
<style lang="stylus" scoped>
table()
.block-active {
    padding 15px
}

.header.block
    margin-top 20px
    display flex
    align-items center
    justify-content space-between
    margin-top 50px

    .header-left
        display flex
        align-items center

    .portrait
        width 72px
        height 72px
        border-radius 50%
        margin-right 24px

    .left-info-title
        font-weight 600
        color #202536
        font-size 20px

    .left-info-date
        font-size 12px
        color #5E617D

.block-alone
    margin-bottom 50px

.btn
    margin-left 20px
    width 100px

.table-top-title
    display flex
    justify-content space-between
    align-items center

    .title
        font-weight 600
        color rgba(0, 0, 0, 0.85)
        font-size 16px

.operation-box
    display flex
    align-items center

.row
    margin-bottom 20px
    justify-content: center;

    .name
        margin-right 15px
        width 120px

    .el-input
        width 222px

.row-uninsured
    font-weight bold
    font-size 15px

.btn-alone
    margin 0

.header-right
    display flex

.foot
    bottom 0
    background #fff
    height 72px
    border-radius 8px
    position absolute
    left 0
    bottom 0
    width calc(100% - 48px)
    margin-left 24px
    z-index 10
    padding 0 24px
    box-sizing border-box

.foot-operation
    display flex
    align-items center
    justify-content space-between

    .foot-btn-box
        display flex
        align-items center

.select-delete
    display flex
    align-items center
    color #646a73
    margin-right 32px

    .num
        color #2ea1ff

    .delete
        color #ff8172

/deep/ .alert-box .container-c
    width 642px

.alert-bottom
    height 64px
    box-shadow: 0 -1px 3px 0 #ccc;
    display flex
    align-items center
    justify-content right
    padding-right 24px

    .alert-bottom-btn
        width 88px
        height 32px
        margin 0 8px

/deep/ .remind-popup .container-c
    width 480px

.remind-popup-box
    width 200px
    margin 0 auto

    .remind-i
        display flex
        align-items center
        margin 24px 0
        font-size 14px

    .remind-i-title
        color #5E617D

    .remind-i-name
        color #202536

    .operation-type-box
        width 72px
        height 30px
        background #EBFFF8
        border-radius 15px
        display flex
        align-items center
        justify-content center

        .operation-type-img
            width 16px
            height 16px
            margin-right 3px

    .operation-type-box-active
        background #FFF1F0

/deep/ .success-popup .container-c
    width 480px

    .success-popup-box
        width 110px
        margin 0 auto
        display flex
        flex-direction column
        align-items center
        padding 0 0 43px 0

        .title
            font-size 20px
            color #303133
            font-weight bold
            margin 24px 0 8px 0

        .num
            color #9497B1
            margin-bottom 30px

    .insure-box
        padding 0 30px 30px 30px

    .insure-box-btn
        margin-top 30px

        .btn
            margin-left 20px

    .insure-box-btn-active {
        display flex
        align-items center
        justify-content center
    }

    .btn-white-blue-active {
        border 1px solid #ccc
        color #000
        width 88px
        height 32px
    }

    .btn-green-active {
        width 88px
        height 32px
    }

    .insure-box-info
        padding 0 20px

        .title
            color #202536
            font-size 18px
            font-weight bold
            text-align center

    .name-box
        margin-top 20px

        .name
            color #202536
            font-size 16px
            margin-bottom 15px
            text-align center

        .active
            margin-top 20px

    .num
        font-weight 700

.title-left
    display flex
    align-items center

    .search
        margin-left 30px

.effective
    margin-right 15px
    font-size 15px

.error-table
    padding: 20px 20px;
    background: #F7F5F7

.el-table--fit
    border-radius 8px

.el-alert.is-center
    justify-content left

.manipulate-mistake
    text-align: center
    margin-bottom: 30px
    font-size: 20px
    font-weight: bold

.receive
    padding: 25px 0;
    display: flex;
    justify-content: center;

.obtain
    height 32px
</style>
